<template>
    <div>
        <div style="padding: 15px;" v-if="data.isPassword">
            <el-form label-width="120px" label-position="top">

                <el-form-item label="到期天数">
                    
                    <el-input v-model="state.expire_time" type="number" />
                    <div>
                        <el-tag @click="setTian(item)" v-for="(item, index) in data.expire" :key="index" style="margin-right: 8px;">{{ item }}天</el-tag>
                    </div>
                </el-form-item>

                <el-form-item label="手机号码">
                    <el-input v-model="state.tel" type="textarea" rows="6" placeholder="多个手机号码之间请换行" />
                </el-form-item>

                
                
                <el-form-item>
                    <el-button type="default" @click="logout">退出</el-button>
                    <el-button type="primary" @click="addTel">确认</el-button>
                </el-form-item>
            </el-form>
            <el-alert :title="'未执行数量：' + data.number" type="info" center :closable="false" />
        </div>
        <div style="padding: 15px;" v-if="!data.isPassword">
            <el-form label-width="120px" label-position="top">

                <el-form-item label="登录密码">
                    <el-input v-model="state.password" type="string" :clearable="true" />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="login" v-blur>登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import indexCover from '/@/assets/index/index-cover.svg'
import { useSiteConfig } from '/@/stores/siteConfig'
import { useMemberCenter } from '/@/stores/memberCenter'
import Header from '/@/layouts/frontend/components/header.vue'
import Footer from '/@/layouts/frontend/components/footer.vue'
import { memberCenterBaseRoutePath } from '/@/router/static/memberCenterBase'
import { reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'

const siteConfig = useSiteConfig()
const memberCenter = useMemberCenter()

import { isPasswordApi, loginApi, logoutApi, addTelApi } from '/@/api/frontend/index'


const state = reactive({
    
})



const data = reactive({
    isPassword: false,
    number: '加载中',
    expire: []
})

const login = () => {
    loginApi(state).then((e) => {
        if(e.code == 1){
            data.isPassword = true;
        }
    })
}

const setTian = (t:number) => {
    state.expire_time = t;
}

const addTel = () => {
    addTelApi(state).then((e) => {
        if(e.data.code == 400){
            ElMessageBox.alert(e.data.errTel, '错误的手机号码', { dangerouslyUseHTMLString: true })
        }
        if(e.data.code == 200){
            state.tel = null;
            state.expire_time = null;
            data.number = e.data.number;
        }
    })
}

const logout = () => {
    logoutApi().then((e) => {
        data.isPassword = false;
    })
}

onMounted(() => {
    isPasswordApi().then((e) => {
        data.isPassword = e.data.cache;
        data.number = e.data.number;
        data.expire = e.data.expire;
    })
})

</script>

<style scoped lang="scss">
.container-button {
    margin: 0 15px 15px 0;
}
.container {
    width: 100vw;
    height: 100vh;
    background: url(/@/assets/bg.jpg) repeat;
    color: var(--el-color-white);
    .main {
        height: calc(100vh - 120px);
        padding: 0;
        .main-container {
            display: flex;
            height: 100%;
            width: 66%;
            margin: 0 auto;
            align-items: center;
            justify-content: space-between;
            .main-left {
                padding-right: 50px;
                .main-title {
                    font-size: 45px;
                }
                .main-content {
                    padding-top: 20px;
                    padding-bottom: 40px;
                    font-size: var(--el-font-size-large);
                }
            }
            .main-right {
                img {
                    width: 380px;
                }
            }
        }
    }
}
.header {
    background-color: transparent !important;
    box-shadow: none !important;
    position: fixed;
    width: 100%;
    :deep(.header-logo) {
        span {
            padding-left: 4px;
            color: var(--el-color-white);
        }
    }
    :deep(.frontend-header-menu) {
        background: transparent;
        .el-menu-item,
        .el-sub-menu .el-sub-menu__title {
            color: var(--el-color-white);
            &.is-active {
                color: var(--el-color-white) !important;
            }
            &:hover {
                background-color: transparent !important;
                color: var(--el-menu-hover-text-color);
            }
        }
    }
}
.footer {
    color: var(--el-text-color-secondary);
    background-color: transparent !important;
    position: fixed;
    bottom: 0;
}

@media screen and (max-width: 1024px) {
    .container {
        .main {
            height: unset;
        }
    }
    .main-container {
        width: 90% !important;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center !important;
        .main-right {
            padding-top: 50px;
        }
    }
}
@media screen and (max-width: 375px) {
    .main-right img {
        width: 300px !important;
    }
}
@at-root html.dark {
    .container {
        background: url(/@/assets/bg-dark.jpg) repeat;
    }
}
</style>
